<template>
  <div class="pending-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="24">
        <div class="summary-item">
          余额：
          <span class="summary-value">{{ toDecimal2(Math.round(balance * 100) / 100) }}</span>
        </div>
<!--        <div class="summary-item">
          项目合计金额：
          <span class="summary-value">{{ (parseFloat((totalAmount * rate / 100).toFixed(2)) + parseFloat(totalAmount)) }}</span>
          元
        </div>
        <div class="summary-item">
          费率：
          <span class="summary-value">{{ rate }}</span>
          %
        </div>
        <div class="summary-item">
          服务费合计：
          <span class="summary-value">{{ (totalAmount * rate / 100).toFixed(2) }}</span>
          元
        </div>-->
        <div class="summary-item">
          个人实收金额：
          <span class="summary-value">{{ toDecimal2(Math.round(totalAmount * 100) / 100) }}</span>
          元
        </div>
        <div class="summary-item summary-item-danger">
          被驳回：
          <span class="summary-value">{{ reject_count }}</span>
        </div>
        <br/>
      </vab-query-form-left-panel>
      <vab-query-form-left-panel :span="12">
        <el-button
          style="z-index: 10"
          icon="el-icon-check"
          type="primary"
          :disabled="!hasSelected"
          @click="submit"
        >
          申请
        </el-button>
        <el-button
          style="z-index: 10"
          icon="el-icon-close"
          type="danger"
          :disabled="!hasSelected"
          @click="showRefuse"
        >
          驳回
        </el-button>
        <el-button
          style="z-index: 10"
          icon="el-icon-download"
          type="success"
          :disabled="!hasSelected"
          @click="importFile"
        >
          导出
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">

        <el-form inline @submit.native.prevent>
          <el-form-item>
            <el-input
              style="width: 200px"
              v-model.trim="queryForm.keyword"
              placeholder="请输入供应商、收款人、手机号搜索"
              clearable
              class="search-input"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
   <!-- <div v-if="tsshow" class="w-notification">
      <div class="w-notification-box">
        <div class="w-notification__group">
          <div class="w-notification__content">
            <p>点击可以展开项目详情</p>
          </div>
          <div @click="close" class="w-but-close el-icon-close"></div>
        </div>
      </div>
    </div>-->
    <el-table
      v-loading="listLoading"
      ref="table"
      :data="list"
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand">
        <template #default="{ row, $index }">
          <el-table
            :data="row.children"
            :ref="`children${row.id}`"
            class="subtable"
            border
            @selection-change="
              (selection) => handleSelectionChange($index, selection)
            "
          >
            <el-table-column
              type="selection"
              width="48"
              align="center"
              :selectable="isSelectable"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="服务商"
              prop="supplier_name"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="手机号"
              prop="mobile"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="付款金额"
              prop="subtotal"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="费率类型" >
              <template #default="{ row }">
                <div style="display: flex;">
                  <div style="display: flex;" v-for="(item,ind) in row.ratio_arr" :key="ind">
                    <span style="margin-right: 10px;">{{item.name}}({{item.ratio === ''?0:item.ratio}}%)</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="状态">
              <template #default="{ row: subRow }">
                <span
                  v-if="subRow.status === 4 || subRow.status === 5"
                  class="status-reject"
                  @click="showReason(subRow)"
                >
                  {{ subRow.status | detailStatus }}
                </span>
                <span v-else>{{ subRow.status | detailStatus }}</span>
                <span style="color: #f56c6c;font-size: 12px" v-if="subRow.is_supplier_check===2">（未认证）</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        type="index"
        width="95"
      />
      <el-table-column align="center" show-overflow-tooltip label="项目名称">
        <template #default="{ row }">
          <span class="relative">
            {{ row.activity_name }}
            <el-tag
              v-if="row.reject_number"
              class="tag-refuse"
              type="danger"
              effect="dark"
              size="mini"
            >
              驳回 {{ row.reject_number }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="项目编号"
        prop="number"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="nameList"
        label="已选服务商"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="付款费用"
        prop="amount"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="操作"
        width="130"
      >
        <template #default="{ row: subRow }">
          <el-button
            type="text"
            class="sub-btn"
            @click="showChecks(subRow)"
          >
            查看审批材料
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog :visible.sync="refuseVisible" title="驳回原因" width="500px">
      <el-form>
        <el-form-item>
          <el-input v-model="reason" type="textarea" :rows="5"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="refuseVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleRefuse">确 认</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="detailsVisible" title="付款详情">
      <div class="details-meta">
        <div class="details-meta-item">
          <span class="details-meta-label">付款总金额：</span>
          100元
        </div>
        <div class="details-meta-item">
          <span class="details-meta-label">申请时间：</span>
          2021-03-04 12:00:00
        </div>
      </div>
      <el-table :data="details">
        <el-table-column label="序号" type="index" width="95"/>
        <el-table-column label="项目名称" prop="activity_name"/>
        <el-table-column label="项目名称" prop="project_name"/>
        <el-table-column label="细项" prop="details"/>
        <el-table-column label="项目时间" prop="created_at"/>
        <el-table-column label="金额" prop="amount"/>
        <el-table-column label="验收材料">
          <template #default="{ row }">
            <el-button type="text" @click="showChecks(row.activity_id)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="查看审批材料"
      :visible.sync="checksVisible"
      width="1130px"
    >
      <el-form label-position="top">
        <el-table :data="checkTypes.fileList">
          <el-table-column align="center" show-overflow-tooltip label="文件名">
            <template #default="{ row }">
              {{row.name}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="175" fixed="right">
            <template #default="{ row }">
              <el-button @click="downloadFile(row.url)" type="text">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item
          v-if="checkTypes.fileList && !checkTypes.fileList.length"
          label="该项目无需提交审批材料"
        />
      </el-form>
    </el-dialog>

    <!--优惠券弹窗-->
    <el-dialog :visible.sync="couponVisible" title="" width="700px">
      <el-form :model="checkData" label-width="100px">
        <div class="coupon-top">
          <div class="coupon-box">
            <div class="coupon-box-txt">个人实收金额：{{ toDecimal2(Math.round(totalAmount * 100)  / 100) }}</div>
            <div class="coupon-box-txt">费率：{{rate}}%</div>
            <div class="coupon-box-txt">服务费：{{ toDecimal2(Math.round(totalAmount * rate)  / 100) }}</div>
            <div class="coupon-box-txt font_color">项目合计金额：{{ toDecimal2(parseFloat(Math.round(totalAmount * rate)  / 100) + parseFloat(totalAmount)) }}</div>
          </div>
          <div class="coupon-box">
            <div class="coupon-box-txt">已选优惠券：{{checkData.money}}元</div>
            <div class="coupon-box-txt">抵扣服务费：{{ parseFloat(checkData.money) < parseFloat(totalAmount * rate / 100) ? parseFloat(checkData.money) : (Math.round(totalAmount * rate)  / 100) }}</div>
            <div class="coupon-box-txt">券后合计金额：{{ (parseFloat(Math.round(totalAmount * rate)  / 100)- checkData.money<0?0:(parseFloat(Math.round(totalAmount * rate)  / 100)- checkData.money))+parseFloat(totalAmount) }}</div>
          </div>
        </div>
        <div class="coupon-bot">
          <div class="coupon-txt1">注：优惠券只可抵用服务费。</div>
          <div class="coupon-txt2">可用优惠券：</div>
          <div v-if="checkData.supplier_name_arr && checkData.supplier_name_arr.length > 0">
            <el-radio-group v-model="checkData.radio">
              <el-radio class="el-radios" @click.native.prevent="clickitem(item.id,index)" :label="item.id" :key="index" v-for="(item,index) in checkData.supplier_name_arr">
                <span class="">{{item.money}}元券（{{item.number}}张）</span>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="coupon-txt4" v-else>暂无</div>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="couponVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheckConfirm1">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!--选择费率弹窗-->
    <el-dialog :visible.sync="selfeilv" title="费率类型选择" width="700px" top="30vh">
      <el-form :model="checkData" label-width="100px">
        <div class="coupon-top">
          <el-radio-group v-model="radios.radio">
            <el-radio class="el-radios2" :disabled="item.ratio === ''? true:false" @click.native.prevent="clickitem2(item,index)" :label="item.name" :key="index" v-for="(item,index) in radios.ratio_arr">
              <span class="">{{item.name}}({{item.ratio=== ''?0:item.ratio}}%)</span>
              <span class="selects" v-if="item.scene && item.scene.length>0">
                <el-select style="width:100px;margin-left: 10px;" v-model="radios.select" placeholder="请选择">
                    <el-option
                      v-for="(ite,ind) in item.scene"
                      :key="ind"
                      :label="ite.name"
                      :value="ite.id"
                      :disabled="item.ratio === ''? true:false">
                    </el-option>
                </el-select>
              </span>
            </el-radio>
          </el-radio-group>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="selfeilv = false">取 消</el-button>
          <el-button type="primary" @click="handleCheckConfirm2">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :visible.sync="smsVisible" title="身份验证" width="400px">
      <el-form :model="checkForm" label-width="100px">
        <el-form-item label="手机号">
          <div>{{ maskedPayPhone }}</div>
        </el-form-item>
        <el-form-item label="手机验证码" prop="code" class="phone-code">
          <el-input v-model="checkForm.code" placeholder="请输入4位数验证码">
            <template #append>
              <el-button
                type="primary"
                :disabled="!!smsCountdown"
                @click="sendSms"
              >
                {{ smsCountdown ? `${smsCountdown}s后重发` : '重新发送' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="支付密码" prop="pass" class="phone-code">
          <el-input v-model="checkForm.pass" placeholder="请输入支付密码" show-password/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="smsVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleCheckConfirm">
            确 定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getCheckList,
    getCheckDetailList,
    confirmRequest,
    rejectRequest,
    importFile,
  } from '@/api/dc_payment'
  import {sms, upload} from '@/api/common'
  import {getCheckTypes, saveChecks} from '@/api/activity'
  import {getuserticketlists} from '@/api/coupon'
  import {getStaticUserInfo} from '@/utils/user'
  import {getChecks} from '@/api/invoice'

  export default {
    name: 'PaymentCheck',

    filters: {
      detailStatus: function (status) {
        const statusMap = {
          1: '待提交',
          2: '待审核',
          3: '财务提交总平台',
          4: '被驳回',
          5: '被驳回',
          6: '总审接收',
        }
        return statusMap[status] || '异常'
      },
    },

    data() {
      return {
        balance: 0,
        rate: 0,
        reject_count: 0,
        selList: [],
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          list_row: 10,
          keyword: '',
        },
        smsVisible: false,
        smsTimer: null,
        smsCountdown: 0,
        couponVisible: false,
        staticUserInfo: getStaticUserInfo(),
        refuseVisible: false,
        selfeilv:false,
        reason: '',
        detailsVisible: false,
        details: [{}],
        checksVisible: false,
        checks: [],
        uploadChecksVisible: false,
        checkTypes: [],
        currentActivityId: null,
        currentRow: null,
        checkForm: {
          pass: '',
          code: '',
        },
        checkData: {
          money:'0',
          radio:'',
          id:''
        },
        sel_index:'',
        //tsshow:false,
        radios:{
          radio:'',
          type:'',
          select:'',
          types:[],
          ratio_arr:[], //费率
        }
      }
    },

    computed: {
      hasSelected() {
        return this.selectedRows.length > 0
      },
      totalAmount() {
        return this.selectedRows
          .map((row) => Number(row.subtotal))
          .reduce((sum, num) => sum + num, 0)
          .toFixed(2)
      },
      maskedPayPhone({staticUserInfo}) {
        const {pay_phone_number: phone} = staticUserInfo
        return `${phone.slice(0, 3)}****${phone.slice(7)}`
      },
      selectedRows() {
        let rows = []
        this.list.forEach((item) => {
          rows = [...rows, ...item.selection]
        })
        return rows
      },
    },

    created() {
      this.getList();
      this.getcoupon();
      /*if(localStorage.getItem("tishi2")===null){
        this.tsshow = true;
        localStorage.setItem("tishi2",true)
      }else if(localStorage.getItem("tishi2")){
        this.tsshow = false;
      }*/
    },

    activated() {
      this.getList()
    },

    methods: {
      toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
          return false;
        }
        var f = Math.round(x*100)/100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + 2) {
          s += '0';
        }
        return s;
      },
      /*close() {
        this.tsshow = false;
      },*/
      handleCheckConfirm2(){
        if(this.radios.radio === '小额专票'){
          let is_dae = false;
          let is_xiaoe = false;
          if(this.list && this.list.length>0){
            this.list.forEach(item=>{
              if(item.selection && item.selection.length>0){
                item.selection.forEach(ite=>{
                  if(ite.is_dae){
                    is_dae = ite.is_dae
                  }
                  if(ite.is_xiaoe){
                    is_xiaoe = ite.is_xiaoe
                  }
                })
              }
            })
          }
          if(is_dae && is_xiaoe){
            let msg = '';
            let msgs = [];
            if(this.list && this.list.length>0){
              this.list.forEach(item=>{
                if(item.selection && item.selection.length>0){
                  item.selection.forEach(ite=>{
                    if(ite.is_dae){
                      msgs.push(ite.supplier_name)
                    }
                  })
                }
              })
            }
            let msgss = this.removeDuplicatedItem(msgs)
            if(msgss && msgss.length>0){
              msgss.forEach(item=>{
                if(msg === ''){
                  msg += item;
                }else{
                  msg +=  '、' + item;
                }
              })
            }
            this.$alert(msg + '服务商本月为大额专票，请单独提交！', '提示')
            return false
          }
        }
        if(this.radios.ratio_arr && this.radios.ratio_arr.length>0){
          this.radios.ratio_arr.forEach(item=>{
            if(this.radios.radio === item.name && item.scene.length == 0){
              if(item.ratio === ''){
                this.rate = 0
              }else{
                this.rate = item.ratio
              }
            }else if(this.radios.radio === item.name && item.scene.length>0){
              if(item.ratio === ""){
                this.rate = 0
              }else{
                this.rate = item.ratio
              }
            }
          })
        }
        if(this.rate === 0){
          this.$alert('费率不能为0！', '提示')
          return false
        }
        if(this.radios.radio === ''){
          this.$alert('请选择费率！', '提示')
          return false
        }else if(this.radios.radio === '普票'){
          if(this.radios.select === ''){
            this.$alert('请选择普票类型！', '提示')
            return false
          }
        }
        this.selfeilv = false;
        this.couponVisible = true;

      },
      handleCheckConfirm1(){
        let count = ((parseFloat(this.totalAmount * this.rate / 100 - this.checkData.money)<0?0:parseFloat(this.totalAmount * this.rate / 100 - this.checkData.money)) + parseFloat(this.totalAmount)).toFixed(2);
        let balance = (parseFloat(this.balance)).toFixed(2);
        if(parseFloat(balance) < parseFloat(count)){
          this.$baseMessage('余额不足！', 'warning')
          return
        }
        this.sendSms();
        this.checkForm.pass= '';
        this.checkForm.code = '';
        this.smsVisible = true;
        this.couponVisible = false;
      },
      getcoupon(){
        this.listLoading = true
        getuserticketlists().then(data =>{
          this.checkData.supplier_name_arr = data
          this.listLoading = false
          console.log(22222,data)
        })
      },
      clickitem2(row,index){
        console.log(22333,row)
        if(row.ratio === ''){
          this.$alert('费率为0%不可选！', '提示')
          return
        }
        if(this.radios.ratio_arr && this.radios.ratio_arr.length>0){
          this.radios.ratio_arr.forEach(item=>{
            if(row.name === item.name){
              this.radios.radio = item.name;
              this.radios.type = item.type;
            }
          })
        }
      },
      //优惠券-弹窗-单选框
      clickitem(row,index){
        console.log(22333,row)
        console.log(789,this.checkData)
        if(this.sel_index !== index){
          this.checkData.radio=row
          this.checkData.supplier_name_arr.forEach(item => {
            if(item.id === row){
              this.checkData.money = item.money
              this.checkData.id = item.id
            }
          })
        }else{
          this.checkData.radio?this.checkData.radio='':this.checkData.radio=row
          this.checkData.supplier_name_arr.forEach(item => {
            if(this.checkData.radio===''){
              this.checkData.money = '0'
            }else {
              if(item.id === row){
                this.checkData.money = item.money
                this.checkData.id = item.id
              }
            }
          })
        }

        this.sel_index = index;
      },
      //优惠券-弹窗-单选框
      /*getValue(row){
        console.log(456,row)
        console.log(789,this.checkData.supplier_name_arr)
        this.checkData.supplier_name_arr.forEach(item => {
          if(item.id === row.radio){
            this.checkData.money = item.money
            this.checkData.id = item.id
          }
        })
        console.log(110,this.checkData)
      },*/
      importFile() {
        let params = {
          id: this.selectedRows.map(val => val.id).join(',')
        }
        importFile(params).then(res => {
          location.href = res
        })
      },
      downloadFile(url) {
        location.href = url
      },
      async getList() {
        this.listLoading = true
        const {data, rate, reject_count, balance} = await getCheckList(this.queryForm)
        this.list = data.data.map((item) => ({
          ...item,
          children: [],
          details_count: 0,
          amount: 0,
          selection: [],
          ratio_arrs:[],
          is_dae:false,
          is_xiaoe:false
        }))
        this.balance = balance
        this.total = data.total
        //this.rate = +rate
        this.reject_count = reject_count
        this.listLoading = false
      },
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getList()
      },
      search() {
        this.queryForm.page = 1
        this.getList()
      },
      handleSelectionChange(index, rows) {
        console.log(22222222,index,rows,this.list)
        this.list[index].selection = rows
        this.list[index].details_count = rows.length
        this.list[index].nameList = rows.map((val) => val.supplier_name).join()
        this.list[index].amount = rows.reduce(
          (result, item) => result + Number(item.subtotal),
          0,
        )

        if(this.list && this.list.length>0){
          this.list.forEach(item=>{
            if(item.selection && item.selection.length > 0){
              item.selection.forEach(ite=>{
                this.$set(ite,'is_dae',false);
                this.$set(ite,'is_xiaoe',false);
                if(ite.ratio_arr && ite.ratio_arr.length>0){
                  ite.ratio_arr.forEach(i=>{
                    if(i.name === '大额专票'){
                      ite.is_dae = true;
                    }else if(i.name === '小额专票'){
                      ite.is_xiaoe = true;
                    }
                  })
                }
              })
            }
          })
        }

      /*  console.log(11111111,index, rows ,this.list)
        let ratio_arrs = [];
        if(this.list[index].details_count >0 ){
          ratio_arrs = rows[0].ratio_arr;
        }


        this.list[index].ratio_arrs = ratio_arrs;//选中费率赋值
        let is_dae = false;
        let is_xiaoe = false;
        if(this.list[index].ratio_arrs && this.list[index].ratio_arrs.length>0){
          this.list[index].ratio_arrs.forEach(item=>{
            if(item.name === '大额专票'){
              is_dae = true
            }
            if(item.name === '小额专票'){
              is_xiaoe = true
            }
          })
        }
        this.list[index].is_dae = is_dae;//选中费率赋值
        this.list[index].is_xiaoe = is_xiaoe;//选中费率赋值*/
        console.log(44,this.list)
        this.$forceUpdate()
      },
      submit() {
        // this.$confirm('确定审核通过付款申请?', { type: 'warning' }).then(() => {
        //   const idsStr = this.selectedRows.map((row) => row.id).join()
        //   confirmRequest({ id: idsStr }).then((res) => {
        //     this.$baseMessage(res, 'success')
        //     this.getList()
        //   })
        // })
        let is_dae = false;
        let is_xiaoe = false;
        if(this.list && this.list.length>0){
          this.list.forEach(item=>{
            if(item.selection && item.selection.length>0){
              item.selection.forEach(ite=>{
                if(ite.is_dae){
                  is_dae = ite.is_dae
                }
                if(ite.is_xiaoe){
                  is_xiaoe = ite.is_xiaoe
                }
              })
            }
          })
        }
        if(is_dae && is_xiaoe){
          if(this.list && this.list.length>0){
            this.list.forEach(item=>{
              if(item.selection && item.selection.length>0){
                item.selection.forEach(ite=>{
                  if(ite.is_xiaoe){
                    this.radios.ratio_arr = ite.ratio_arr;
                  }
                })
              }
            })
          }
        }else{
          if(this.list && this.list.length>0){
            this.list.forEach(item=>{
              if(item.selection && item.selection.length>0){
                item.selection.forEach(ite=>{
                  this.radios.ratio_arr = ite.ratio_arr;
                })
              }
            })
          }
        }
        if(this.checkData.supplier_name_arr){
          //this.couponVisible = true;
          this.selfeilv = true;
          this.radios.radio = '';
          this.radios.select = '';
          this.radios.type = '';
          console.log(111,this.radios)
        }
        console.log(3333,this.list);
        /*this.$confirm('确定审核通过付款申请?', {type: 'warning'}).then(
          async () => {
            if(this.checkData.supplier_name_arr){
              //this.couponVisible = true;
              this.selfeilv = true;
              this.radios.radio = '';
              this.radios.select = '';
              this.radios.type = '';
              if(this.list && this.list.length>0){
                this.list.forEach(ite =>{
                  if(ite.selection && ite.selection.length>0){
                    ite.selection.forEach((i,ind)=>{
                      if(ind === 0){
                        this.radios.ratio_arr = i.ratio_arr
                      }
                    })

                  }
                })
              }
              console.log(111,this.radios)
            }else{
              await this.sendSms()
              this.checkForm.pass= ''
              this.checkForm.code = ''
              this.smsVisible = true
            }
          },
        )*/
      },
      removeDuplicatedItem(ar) {
        var ret = [];
        for (var i = 0, j = ar.length; i < j; i++) {
          if (ret.indexOf(ar[i]) === -1) {
            ret.push(ar[i]);
          }
        }
        return ret;
      },
      async sendSms() {
        await sms()
        this.smsCountdown = 60
        this.smsTimer = setInterval(() => {
          this.smsCountdown--
          if (this.smsCountdown === 0) {
            clearInterval(this.smsTimer)
          }
        }, 1000)
      },
      handleRefuse() {
        this.refuseVisible = false
        const idsStr = this.selectedRows.map((row) => row.id).join()
        rejectRequest({id: idsStr, msg: this.reason}).then((res) => {
          this.$baseMessage(res, 'success')
          this.getList()
        })
      },
      showDetails() {
        this.detailsVisible = true
      },
      showChecks(val) {
        let types = {
          fileList: []
        }
        types = {
          ...val,
          fileList: val.img.map((img) => ({
            uid: Math.random(),
            name: img.split('/').pop(),
            url: img,
          })),
        }
        this.checkTypes = types
        this.checksVisible = true
      },
      showReason({reject_msg}) {
        this.$alert(reject_msg, '驳回原因')
      },
      async handleExpandChange(row, expanded) {
        if (!row.load) {
          row.load = true
          const supplierId = row.id
          const {data} = await getCheckDetailList({
            activity_id: supplierId,
            page: 1,
            list_row: 99999,
          })
          //row.children = data
          row.children = data.map((item) => ({
            ...item,
            // is_check 字段: 1-可以点击, 2-不能点击, 需要上传材料
            has_checks: item.is_supplier_check === 1, // item.is_check === this.checks,
          }))
        } else {
          this.$nextTick(() => {
            if(this.$refs[`children${row.id}`]) {
              for (let val of this.selectedRows) {
                this.$refs[`children${row.id}`].toggleRowSelection(val);
              }
            }
          })
        }

      },
      isSelectable(row) {
        return row.has_checks
      },
      showUploadChecks(id, row) {
        this.currentActivityId = id
        this.currentRow = row
        getCheckTypes({activity_id: id}).then((res) => {
          const types = res.map((type) => {
            return {
              ...type,
              fileList: type.check_img.map((img) => ({
                uid: Math.random(),
                url: img,
              })),
            }
          })
          // types.unshift({ id: 0, project_category: '未分配', fileList: [] })
          this.checkTypes = types
          this.uploadChecksVisible = true
        })
      },
      getUploadTypeLabel(type, index) {
        let label = type.project_category
        const num = type.fileList.length
        // label += ` ${index ? `(${num}/6)` : num}`
        label += ` (${num}/6)`
        return label
      },
      onChecksExceed() {
        this.$baseMessage('最多只能上传 6 张图片哦', 'warning')
      },
      handleSaveChecks() {
        if (!this.validateChecks()) return
        const images = []
        const types = this.checkTypes
        types.forEach((type) => {
          const files = type.fileList
          const typeImages = files.map((file) => file.url).join()
          images.push({
            activity_expenses_id: type.id,
            check_img: typeImages,
          })
        })
        const imagesJson = JSON.stringify(images)
        saveChecks({
          activity_id: this.currentActivityId,
          check_img: imagesJson,
        }).then((res) => {
          this.uploadChecksVisible = false
          this.$baseMessage(res, 'success')
          this.handleExpandChange(this.currentRow)
        })
      },
      onChecksChange(fileList, index) {
        // 注: fileList 包含全部图片
        const type = this.checkTypes[index]
        // 处理待上传图片
        const formData = new FormData()
        fileList
          .filter((file) => file.raw)
          .forEach((file) => formData.append('file[]', file.raw))
        // 上传图片
        upload(formData).then((res) => {
          // 上传后处理
          const urls = res.url
          type.fileList = [
            ...fileList.filter((file) => !file.raw),
            ...urls.map((url) => ({url})),
          ]
          this.$set(this.checkTypes, index, type)
        })
      },
      validateChecks() {
        const types = this.checkTypes
        for (const type of types) {
          const files = type.fileList
          if (files.length < 1) {
            this.$baseMessage(
              `请上传至少 1 个文件`,
              'error',
            )
            return false
          }
          for (const file of files) {
            if (file.url.startsWith('blob:')) {
              this.$baseMessage('图片上传中，请重试', 'error')
              return false
            }
          }
        }
        return true
      },
      removeCheck(typeIndex, fileIndex) {
        this.checkTypes[typeIndex].fileList.splice(fileIndex, 1)
        this.$forceUpdate()
      },
      showRefuse(id) {
        this.reason = ''
        this.refuseVisible = true
      },
      handleCheckConfirm() {
        if (!this.checkForm.pass) {
          this.$baseMessage('请输入支付密码', 'error')
          return
        }
        if (!this.checkForm.code) {
          this.$baseMessage('请输入手机验证码', 'error')
          return
        }
        const ids = this.selectedRows.map((row) => row.id).join()
        let ratio_arrs = []
        if(this.list && this.list.length>0){
          this.list.forEach(item=>{
            if(item.selection && item.selection.length>0){
              item.selection.forEach(ite=>{
                let ratio_arr={
                  supplier_id:'',
                  type:'',
                  scene:''
                }
                ratio_arr.supplier_id = ite.supplier_id;
                ratio_arr.type = this.radios.type;
                ratio_arr.scene = this.radios.select;
                ratio_arrs.push(ratio_arr)
              })
            }
          })
        }
        console.log(222222,ratio_arrs)
        confirmRequest({
          id: ids,
          pass: this.checkForm.pass,
          code: this.checkForm.code,
          ticket_id: this.checkData.id,
          ratio_arr: JSON.stringify(ratio_arrs)
        }).then((res) => {
          this.$baseMessage(res, 'success')
          this.search()
          this.smsVisible = false
        })
      },
    },
  }
</script>

<style lang="scss">
.selects{
  width: 60px;
  overflow: hidden;
  .select{
    width: 100%;
  }
}
.el-input__inner{
  border: 1px solid #fff;
}
.font_color{
  color: red;
}
/*.w-notification {
  display: flex;
  flex-direction: column;
  top: 120px;
  z-index: 99;
  left: -10px;
  width: 44px;
  box-sizing: border-box;
  background: rgba(0,0,0,0);
  //border: 1px dashed #bbb;
  position: absolute;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
  .w-notification-box{
    position: relative;
    width: 36px;
    display: flex;
    border-radius: 8px;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .w-notification__group {
      padding: 10px 7px 14px 7px;
      margin-right: 8px;
      display: flex;
      flex-direction: column;
      color: #999;
      font-size: 12px;
      line-height: 18px;
    }
  }

  .w-notification-box:before,.w-notification-box:after{
    position:absolute;
    content:'';
    width:8px;
    height:8px;
    right:-4px;
    top:0px;
    margin-top: 45px;
    overflow:hidden;
    pointer-events:none;
    -webkit-transform:rotate(-45deg);
    -mz-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  .w-notification-box:before{
    background:white;
    box-shadow:1px 1px 2px rgba(0,0,0,.2)
  }
  .w-notification-box:after{
    background:#fff;
  }

  .w-but-close{
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ddd;
    text-align: center;
    line-height: 16px;
    font-size: 12px!important;
  }
}
.pending-container{
  position: relative;
}*/
.el-table__expand-icon > .el-icon{
  margin-top: -10px!important;
}
.el-table__expand-icon > .el-icon-arrow-right{
  font-size: 20px!important;
  line-height: 20px;
}
.el-table__expand-icon{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-table__expand-icon
.el-icon-arrow-right:before{
  content: "\e7a0";
  color: #1890ff;
}
.el-table__expand-icon--expanded
.el-icon-arrow-right:before{
  content: "\e7a2";
  color: #1890ff;
}
.el-radios{
  width: 180px;
  margin-bottom: 20px;
  padding: 10px 10px;
  border:1px solid #ddd;
}
.el-radios2{
  width: 220px;
  height: 60px;
  line-height: 40px;
  margin-bottom: 20px;
  padding: 10px 10px;
  border:1px solid #ddd;
}
/*.{
  border:1px solid #1890ff;
}*/
.coupon-top{
  display: flex;
  flex-direction: column;
  .coupon-box{
    display: flex;
    flex-wrap: wrap;
    line-height:30px;
    .coupon-box-txt{
      margin-right: 30px;
    }
  }
}
.coupon-bot{
  display: flex;
  flex-direction: column;
  line-height: 30px;
  .coupon-txt1{
    color: red;
  }
  .coupon-txt2{
    font-weight: bold;
    margin-bottom: 10px;
  }
  .coupon-txt4{
    font-size: 14px;
    color: #999;
    text-align: center;
  }
  .coupon-box-txt{
    margin-right: 30px;
  }
}
  ::v-deep .vab-query-form .left-panel {
    flex-wrap: nowrap;
  }

  ::v-deep .vab-query-form .left-panel > .el-button {
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
  }

  .summary-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .summary-item:not(:last-child) {
    margin-right: 20px;
  }

  .summary-value {
    margin-right: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .summary-item-danger,
  .summary-item-danger .summary-value {
    color: #f56c6c;
  }

  .right-panel .summary-item {
    margin-top: -10px;
  }

  .right-panel .summary-item:last-child {
    margin-right: 10px !important;
  }

  .search-input {
    width: 255px;
  }

  ::v-deep .phone-code button.el-button {
    display: block;
    width: 92px;
    height: 32px;
    color: #fff;
    background: #1890ff;
    border-color: #1890ff;
    border-radius: 0;
  }

  ::v-deep .phone-code button.el-button[disabled] {
    height: 30px;
    color: #c0c4cc;
    background: #ebeef5;
    border-color: #ebeef5;
  }

  .details-meta {
    margin-bottom: 20px;
  }

  .details-meta-label {
    display: inline-block;
    width: 6em;
    font-weight: bold;
  }

  .details-meta-item:not(:first-child) {
    margin-top: 10px;
  }

  .checks {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-bottom: -10px;
  }

  .check {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .relative {
    position: relative;
  }

  .tag-refuse {
    position: absolute;
    top: 50%;
    right: 0;
    border-radius: 999px;
    transform: translate(calc(100% + 7px), -50%);
  }

  .subtable {
    margin-top: -8.5px !important;
    margin-bottom: -7.5px !important;
  }

  .status-reject {
    color: #f56c6c;
    cursor: pointer;
    border-bottom: 1px dashed #dcdfe6;
  }

  .sub-btn {
    padding: 0 !important;
  }

  .sub-btn-danger {
    color: #f56c6c;
  }

  .checks-row {
    display: flex;
    align-items: center;
  }

  .check-item {
    position: relative;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    background-position: center;
    background-size: cover;
    border: 1px solid #c0ccda;
    border-radius: 7px;
  }

  .check-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 0.3s;
  }

  .check-item:hover .check-mask {
    opacity: 1;
  }

  .check-delete {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transform: translate(-50%, -50%);
  }

  ::v-deep .el-upload--picture-card {
    position: relative;
    width: 100px;
    height: 100px;
  }

  .check-add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>

<style>
  html body .el-table.subtable th,
  html body[class*='vab-theme-'] .el-table.subtable th {
    background: #fff;
  }

  .el-table--border.subtable td:first-child .cell {
    padding-left: 14px !important;
  }

  html body .el-table.subtable td .cell,
  html body .el-table.subtable th .cell,
  html body[class*='vab-theme-'] .el-table.subtable td .cell,
  html body[class*='vab-theme-'] .el-table.subtable th .cell {
    font-size: 12px;
  }
</style>
